<template>

<div class="common-tag">
    <el-tag v-for="(tag,index) in tags" :key="tag.name" :closable="tag.path !== '/home'" :effect="tag.name === route.name?'dark':'plain'" @close="handleClose(tag,index)" @click="handleTag(tag)">
      {{ tag.label }}
    </el-tag>
</div>

</template>

<script setup>
import {computed} from 'vue'
import {useAllStoreData} from '@/stores'
import { useRoute,useRouter } from 'vue-router';
const store = useAllStoreData()
const tags = computed(()=>store.state.tags)
const route = useRoute()
const router = useRouter()

const handleClose = (tag,index) =>{
   store.updateTag(tag)

   if(index !== store.state.tags.length) {
    router.push(store.state.tags[index].path)
    store.selectTag(store.state.tags[index])
   }else{
    router.push(store.state.tags[index-1].path)
    store.selectTag(store.state.tags[index-1])
   }
}

const handleTag = (item)=>{
    router.push(item.path)
    store.selectTag(item)
}
</script>

<style lang="less" scoped>

.common-tag{
    margin: 10px 0 0 10px;
}
.el-tag{
    margin-right: 20px;
}
</style>
